<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</head>

	<body>

		<div class="mui-content">
			<div class="mui-card" style="padding: 8px;">
				<div id="mySwitch" class="mui-switch">
					<div class="mui-switch-handle"></div>
				</div>
				<br />
				<!-- 开关打开状态，多了一个.mui-active类 -->
				<div class="mui-switch mui-active">
					<div class="mui-switch-handle"></div>
				</div>
				<br />
				<!-- 简洁模式开关关闭状态 -->
				<div class="mui-switch mui-switch-mini">
					<div class="mui-switch-handle"></div>
				</div>
				<br />
				<!-- 简洁模式开关打开状态 -->
				<div class="mui-switch mui-switch-mini mui-active">
					<div class="mui-switch-handle"></div>
				</div>
				<br />
				<!-- 蓝色开关关闭状态 -->
				<div class="mui-switch mui-switch-blue">
					<div class="mui-switch-handle"></div>
				</div>
				<br/>
				<div class="mui-switch mui-switch-blue mui-switch-mini">
					<div class="mui-switch-handle"></div>
				</div>
			</div>
		</div>

		<script>
			document.getElementById("mySwitch").addEventListener("toggle", function(event) {
				if(event.detail.isActive) {
					alert("open");
				} else {
					alert("close");
				}
			})
		</script>
	</body>

</html>